import { Card, Row, Col } from 'antd';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

// 模拟月度销售额数据
export const monthlyData = [
  { name: '1月', sales: 100 },
  { name: '2月', sales: 200 },
  { name: '3月', sales: 350 },
  { name: '4月', sales: 300 },
  { name: '5月', sales: 250 },
  { name: '6月', sales: 200 },
  { name: '7月', sales: 250 },
  { name: '8月', sales: 200 },
  { name: '9月', sales: 250 },
  { name: '10月', sales: 300 },
  { name: '11月', sales: 200 },
  { name: '12月', sales: 400 },
];

const SalesChart: React.FC = () => {
  // 格式化销售额显示
  const formatSales = (sales: number) => {
    return sales.toLocaleString();
  };

  return (
    <Card className="dashboard-card">
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <div className="chart-container" style={{ height: 300, width: '100%' }}>
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={monthlyData} margin={{ top: 20, right: 20, left: 20, bottom: 20 }}>
                <XAxis dataKey="name" tick={{ fontSize: 12 }} axisLine={false} tickLine={false} />
                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
                <Tooltip
                  formatter={(value: any) => [`${formatSales(value)}`, '销售额']}
                  contentStyle={{ borderRadius: 8, border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
                />
                <Bar
                  dataKey="sales"
                  fill="#3b82f6"
                  radius={[4, 4, 0, 0]}
                  barSize={20}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default SalesChart;